<template>
  <div class="filter-wrapper" v-if="showFilter" :style="{'height': bottomBarHeight}">
    <div class="mask" @click="closeFilter" @touchmove.prevent></div>
    <div class="base-panel" v-if="currentPageStatus === 1">
      <div class="title">{{title}}</div>
      <div class="filter-options">
        <div class="option-item" v-if="page === 'project' || page === 'trends' || page === 'statistics'">
          <p>版块筛选</p>
          <div @click="openModuleSelect">
            <span v-for="item in selectedModule" :key="item.id" style="background: #F2F2F2;margin-right: 5px;display: inline-block;margin-top:5px;">
              {{item.plateName}}
            </span>
            <span v-if="selectedModule.length === 0">全部</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="option-item" v-if="page === 'task' || page === 'trends' || page === 'statistics'">
          <p>项目筛选</p>
          <div @click="openProjectSelect">
            <span v-for="item in selectedProject" :key="item.id" style="background: #F2F2F2;margin-right: 5px;display: inline-block;margin-top:5px;">
              {{item.taskName}}
            </span>
            <span v-if="selectedProject.length === 0">全部</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="option-item" v-if="page === 'task' || page === 'project'">
          <p>{{page === 'task' ? '任务' : '项目'}}名称</p>
          <div>
            <el-input type="text" v-model="taskName" @blur="filterData"></el-input>
          </div>
        </div>
        <div class="option-item" v-if="page === 'trends'">
          <p>人员筛选</p>
          <div @click="selectDingUsers">
            <span v-for="item in filterNames" :key="item" style="background: #F2F2F2;margin-right: 5px;display: inline-block;margin-top:5px;">
              {{item}}
            </span>
            <span v-if="filterNames.length === 0">全部</span>
            <i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="option-item" v-if="page === 'trends'">
          <p>日期筛选</p>
          <div @click="selectDate('currentDate')">{{currentDate}}<i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="option-item" v-if="page === 'task' || page === 'project'">
          <p>负责人筛选</p>
          <div @click="selectPrincipalDingUsers">
            <span v-for="item in filterPrincipalNames" :key="item" style="background: #F2F2F2;margin-right: 5px;display: inline-block;margin-top:5px;">
              {{item}}
            </span>
            <span v-if="filterPrincipalNames.length === 0">全部</span>
            <i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="option-item" v-if="page === 'task' || page === 'project'">
          <p>计划截止</p>
          <div @click="selectDate('filterStartPlanFinishTime')">{{!filterStartPlanFinishTime ? '计划结束起始日期' : filterStartPlanFinishTime}}<i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="option-item" v-if="page === 'task' || page === 'project'">
          <div @click="selectDate('filterEndPlanFinishTime')">{{!filterEndPlanFinishTime ? '计划结束截止日期' : filterEndPlanFinishTime}}<i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <div @click="resetFilter" class="bottom-btn">清除筛选</div>
    </div>
    <div class="module-panel" v-if="currentPageStatus === 2">
      <div class="title">版块列表</div>
      <div class="module-wrapper">
        <div v-for="moduleItem in plateArr" :key="moduleItem.id" class="module-item">
          <el-checkbox style="border-radius: 50%;" v-model="moduleItem.check">{{moduleItem.plateName}}</el-checkbox>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click.stop="currentPageStatus = 1;">取消</div>
        <div @click="selectModule">确定</div>
      </div>
    </div>
    <div class="module-panel" v-if="currentPageStatus === 3">
      <div class="title">项目列表</div>
      <div class="module-wrapper">
        <div v-for="moduleItem in projectArr" :key="moduleItem.id" class="module-item">
          <el-checkbox style="border-radius: 50%;" v-model="moduleItem.check">{{moduleItem.taskName}}</el-checkbox>
        </div>
      </div>
      <div class="bottom-btn">
        <div @click.stop="currentPageStatus = 1;">取消</div>
        <div @click="selectProject">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
      projectArr: [],
      plateArr: [],
      currentPageStatus: 1,
      showFilter: false,
      projectArrCache: [],
      moduleArrCache: [],
      selectedModule: [],
      selectedProject: [],
      taskName: '',
      filterStartPlanFinishTime: '',
      filterEndPlanFinishTime: '',
      filterNames: [],
      filterIds: [],
      filterPrincipalNames: [],
      filterPrincipalIds: [],
      currentDate: '',
      bottomBarHeight: 'calc(100vh - 46px)'
    }
  },
  props: ['page', 'title', 'showArchiveList'],
  mixins: [dingMixin],
  methods:{
    init() {
      this.currentPageStatus = 1;
      this.showFilter = true;
    },
    openModuleSelect() {
      this.currentPageStatus = 2;
    },
    openProjectSelect() {
      this.currentPageStatus = 3;
    },
    closeModule() {
      this.currentPageStatus = 1;
    },
    closeFilter() {
      this.showFilter = false;
    },
    async selectModule() {
      let selectArr = this.plateArr.filter(item => item.check)
      let projectResult = await this.$httpN.postB('division/task/filterProjectList', {searchType: 3, limit: 999, plateIds: selectArr.map(item => { return item.id}).join(',')});
      this.projectArr = projectResult.list;
      this.selectedProject = [];
      this.currentPageStatus = 1;
      this.selectedModule = formUtil.deepCopy(selectArr);
      this.filterData();
    },
    selectProject() {
      let selectArr = this.projectArr.filter(item => item.check)
      this.currentPageStatus = 1;
      this.selectedProject = formUtil.deepCopy(selectArr);
      this.filterData();
    },
    filterData() {
      this.$emit('filterData', {
        plateIds: this.selectedModule.map(item => item.id).join(','),
        projectIds: this.selectedProject.map(item => item.id).join(','),
        dynamicExecutiveId: this.filterIds.join(','),
        searchTime: this.currentDate,
        filterPrincipalIds: this.filterPrincipalIds.join(','),
        taskName: this.taskName,
        filterStartPlanFinishTime: this.filterStartPlanFinishTime,
        filterEndPlanFinishTime: this.filterEndPlanFinishTime,
      })
    },
    selectDingUsers(){
      this.complexPicker(300, [], this.filterIds).then((data)=>{
        this.filterNames = data.map(item => item.name);
        this.filterIds = data.map(item => item.emplId);
        this.filterData();
      })
    },
    selectPrincipalDingUsers() {
      this.complexPicker(300, [], this.filterPrincipalIds).then((data)=>{
        this.filterPrincipalNames = data.map(item => item.name);
        this.filterPrincipalIds = data.map(item => item.emplId);
        this.filterData();
      })
    },
    selectDate(item) {
      this.mobileSelectDate(this[item], (date) => {
        this[item] = date;
        if(this.filterStartPlanFinishTime && this.filterEndPlanFinishTime && (new Date(this.filterStartPlanFinishTime) - new Date(this.filterEndPlanFinishTime) > 0)) {
          this[item] = '';
          return this.mobileAlert('截止日期不可小于开始日期')
        }
        this.filterData()
      });
    },
    resetFilter() {
      this.reset();
      this.filterData();
    },
    reset() {
      this.selectedModule = [];
      this.selectedProject = [];
      this.filterIds = [];
      this.currentDate = dateUtil.thisDay();
      this.filterNames = [];
      this.projectArr = formUtil.deepCopy(this.projectArrCache);
      this.plateArr = formUtil.deepCopy(this.moduleArrCache);
      this.filterPrincipalIds = [];
      this.filterPrincipalNames = [];
      this.taskName = '';
      this.filterStartPlanFinishTime = '';
      this.filterEndPlanFinishTime = '';
    }
  },
  async mounted() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBarHeight = 'calc(100vh - 80px)';
      }
    })
    var projectResult = await this.$httpN.postB('division/task/projectList', {searchType: 3, limit: 999});
    var ModuleResult = await this.$httpN.postB('division/plate/list', {participateType: 2, limit: 999});
    if(this.showArchiveList) {
      let projectResult2 = await this.$httpN.postB('division/task/projectList', {searchType: 6, limit: 999});
      this.projectArr = [...projectResult.list, ...projectResult2.list];

      let ModuleResult2 = await this.$httpN.postB('division/plate/archiveList', {limit: 999});
      this.plateArr = [...ModuleResult.list, ...ModuleResult2.list];
    } else {
      this.projectArr = projectResult.list;
      this.plateArr = ModuleResult.list;
    }

    this.projectArrCache = formUtil.deepCopy(this.projectArr);
    this.moduleArrCache = formUtil.deepCopy(this.plateArr);
    this.currentDate = dateUtil.thisDay();
  }
}
</script>

<style lang="scss" scoped>
  .filter-wrapper{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    z-index: 5;
    .mask{
      background: rgba(0,0,0,0.5);
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
    }
    .base-panel{
      width: 70%;
      position: absolute;
      top:0;
      right: 0;
      height: 100%;
      background: white;
      .title{
        line-height: 46px;
        color: #409EFF;
        padding-left: 16px;
        border-bottom: 1px solid #F6F6F6;
      }
      .filter-options{
        padding: 0 16px;
        .option-item{
          overflow: hidden;
          padding-top:16px;
          padding-bottom: 10px;
          border-bottom: 1px solid #F6F6F6;
          position: relative;
          padding-right: 15px;
          p{
            margin: 0;
            font-weight: bold;
          }
          div{
            margin-top: 10px;
            color: #909399;
          }
          i{
            position: absolute;
            bottom: 10px;
            right: 0;
            font-weight: bold;
          }
        }
      }
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        line-height: 46px;
        color: #409EFF;
        padding-left: 16px;
        border-top: 1px solid #F6F6F6;
      }
    }
    .module-panel{
      width: 80%;
      position: absolute;
      top:0;
      right: 0;
      height: 100%;
      background: white;
      .title{
        font-weight: bold;
        padding-left: 16px;
        border-bottom: 1px solid #F6F6F6;
        line-height: 46px;
      }
      .module-wrapper{
        height: calc(100vh - 150px);
        overflow: auto;
        padding: 16px 16px;
        .module-item{
          padding-left:15px;
          line-height: 30px;
          border-bottom: 1px solid #F6F6F6;
          margin-bottom: 5px;
        }
      }
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        display: flex;
        z-index: 2;
        div{
          flex:1;
          text-align: center;
          line-height: 46px;
          background: #F2F2F2;
          color: #8D8F96;
        }
        >div:last-child{
          color:white;
          background: #639EFC;
        }
      }
    }
  }
</style>